<template>
  <div class="header">
    <router-link tag="div" to="/" class="header-absolute" v-show="showAbsolute">
      <span class="iconfont absolute-back-icon">&#xe604;</span>
    </router-link>
    <div class="header-fixed" v-show="!showAbsolute" :style="fixedStyle">
      <router-link to="/">
        <span class="iconfont fixed-back-icon">&#xe604;</span>
      </router-link>
      景点详情
    </div>

  </div>
</template>

<script>
export default {
  name: 'detailHeader',
  data () {
    return {
      showAbsolute: true,
      fixedStyle: {
        opacity: 0
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollListener)
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollListener)
  },
  methods: {
    scrollListener () {
      const top = document.documentElement.scrollTop
      if (top > 25) {
        this.showAbsolute = false
        if (top < 200) {
          const opacity = top / 200
          this.fixedStyle.opacity = opacity
        }
      } else {
        this.showAbsolute = true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@styles/varibles.styl'
  .header-absolute
    position absolute
    left .1rem
    top .1rem
    border-radius .4rem
    padding .02rem
    background rgba(5,5,5,.5)
    .absolute-back-icon
      font-size .4rem
      color #FFFFFF
  .header-fixed
    z-index 2
    position fixed
    left 0
    right 0
    top 0
    text-align: center
    background $bgColor
    height .6rem
    line-height .6rem
    color #FFFFFF
    .fixed-back-icon
      position: absolute
      top: 0
      left: 0
      width .6rem
      font-size .4rem
      color #fff
</style>
